<template>
  <div class="left-chart-1">
    <div class="charts">
      <div class="lc2-chart">
        <CustomChart v-if="option.xAxis.data.length" :option="option" />
      </div>
    </div>
    <div v-if="!option.xAxis.data.length" class="no-data">暂无数据</div>
  </div>
</template>

<script>
import CustomChart from "../../components/CustomChart";
import { queryEquipmentOffInfo } from "@/api/dashboard/injectionWorkshop";
const lineLabelColor = "#ffffffeb";
export default {
  name: "LeftChart2",
  components: { CustomChart },
  props: {
    refreshKey: {
      type: Number,
      default: 0,
    },
    workshopItem: {
      type: Object,
      default: null,
    },
    groupItem: {
      type: Object,
      default: null,
    },
    produceDate: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      option: {
        color: ["#5470c6", "#ff5050"],
        grid: {
          top: 50,
          bottom: 20,
          left: 35,
          right: 28,
        },
        tooltip: {
          trigger: "axis",
          padding: [5, 10],
        },
        legend: {
          show: true,
          data: [
            {
              name: "停机时间",
            },
            {
              name: "停机次数",
            },
          ],
          textStyle: {
            color: lineLabelColor,
          },
          itemWidth: 13,
          itemHeight: 13,
        },
        xAxis: {
          data: [],
          axisLine: {
            lineStyle: {
              color: lineLabelColor,
            },
          },
          axisLabel: {
            color: lineLabelColor,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            name: "分钟",
            nameTextStyle: {
              color: lineLabelColor,
            },
            position: "left",
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: lineLabelColor,
              },
            },
            axisLabel: {
              color: lineLabelColor,
              hideOverlap: true,
            },
            axisTick: {
              show: false,
            },
            minInterval: 10,
          },
          {
            name: "次",
            nameTextStyle: {
              color: lineLabelColor,
            },
            position: "right",
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: lineLabelColor,
              },
            },
            axisLabel: {
              color: lineLabelColor,
              hideOverlap: true,
            },
            axisTick: {
              show: false,
            },
            minInterval: 1,
          },
        ],
        series: [
          {
            name: "停机时间",
            data: [],
            type: "bar",
            label: {
              show: true,
              fontSize: 11,
              position: "top",
              color: lineLabelColor,
              formatter(param) {
                return param.value || "";
              },
            },
            barWidth: "20%",
            barGap: 0,
            yAxisIndex: 0,
          },
          {
            name: "停机次数",
            data: [],
            type: "bar",
            label: {
              show: true,
              fontSize: 11,
              position: "top",
              color: lineLabelColor,
            },
            barWidth: "20%",
            barGap: 0,
            yAxisIndex: 1,
          },
        ],
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      if (!this.workshopItem?.value || !this.groupItem) {
        return;
      }
      let data = [];
      try {
        const res = await queryEquipmentOffInfo({
          workshopId: this.workshopItem.value,
          produceDate: this.produceDate,
          groupId: this.groupItem.groupId,
        });
        data = res.data || [];
      } catch (error) {
        data = [];
      }

      let xAxisData = [];
      let seriesData1 = [];
      let seriesData2 = [];

      data.forEach((ele) => {
        xAxisData.push(ele.lineName);
        const equipmentRunStatuss = ele.equipmentRunStatuss;
        if (equipmentRunStatuss?.length) {
          seriesData1.push(
            this.toFix(equipmentRunStatuss[0].equipOffDuration, 2)
          );
          seriesData2.push(this.toFix(equipmentRunStatuss[0].equipOffTimes, 2));
        } else {
          seriesData1.push(0);
          seriesData2.push(0);
        }
      });

      this.option.xAxis.data = xAxisData;
      this.option.series[0].data = seriesData1;
      this.option.series[1].data = seriesData2;
    },
  },
  watch: {
    refreshKey: {
      handler() {
        this.getData();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.left-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 42px;
  .charts {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    gap: 8px;
  }
  .lc2-chart {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .chart {
      flex: 1;
    }
  }
  .legend {
    text-align: center;
    margin-top: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    .item {
      i {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 2px;
      }
    }
  }
}
.no-data {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  opacity: 0.6;
}
</style>
